<template>
    <div class="wrap-login">
        <div class="box-login">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="手机号码">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="default" @click="register">注册</el-button>
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import validForm from "../assets/js/valid.js";
import md5 from "../assets/js/md5.js";
export default {
  data() {
    return {
      form: {
        name: "",
        password: ""
      }
    };
  },
  methods: {
    login() {
      let self = this;
      let msg = this.valid();
      if (msg) {
        this.$notify.error({
          title: "表单填写错误",
          message: msg
        });
        return;
      }
      console.log(self.form.name);
      fetch("/api/admin/login", {
        method: "POST",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        body: "name=" + self.form.name + "&password=" + self.form.password
      })
        .then(response => response.json())
        .then(res => {
          if (res.status == 100) {
            let userInfo = {
              id: res.userId,
              name: res.name,
              mail: res.mail,
              merchantName:res.merchantName,
              merchantId:res.merchantId
            };
            localStorage.setItem("userInfo", JSON.stringify(userInfo));
            this.$router.push("/main");
          } else {
            self.$notify.error({
              title: "登录错误",
              message: res.msg
            });
          }
        })
        .catch(err => console.log("Oh, error", err));
    },
    register() {},
    valid() {
      let validtor = new validForm();
    //   validtor.add(this.form.name, [
    //     {
    //       rule: "isMobile",
    //       msg: "手机号码格式不正确"
    //     }
    //   ]);
      validtor.add(this.form.password, [
        {
          rule: "isEmpty",
          msg: "密码格式不正确"
        }
      ]);
      return validtor.start();
    }
  },
  components: {}
};
</script>

<style lang='scss' scoped>
.wrap-login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .box-login {
    width: 400px;
    padding: 20px;
    border-radius: 5px;
    background: #fff;
  }
}
</style>
